<template>
  <div :class="flaga?'bancheng':'banchengs'">
    <div class="shang">
      <span class="iconfont icon-fanhui" @click="fanhui()"></span>
      <p>半成菜品</p>
      <div class="tou">
        <span class="iconfont icon-dian"></span>
        <div class="zhongjian"></div>
        <span class="iconfont icon-shuangyuanquan"></span>
      </div>
    </div>
    <div class="zhong">
      <div class="huayuan">
        <span class="iconfont icon-ziyuan"></span>
        <p>嘉宾花园店</p>
        <span class="iconfont icon-qianjin"></span>
      </div>
      <div class="sousuos">
        <span class="iconfont icon-sousuo"></span>
      </div>
    </div>
    <div class="xia">
      <ul :class="flag?'left':'lefts'">
        <li
          v-for="(item) in this.$store.state.datas"
          :key="item.id"
          :class="active==item.id?'tui':''"
          @click="gaoliang(item.id)"
        >
          <p>{{item.name}}</p>
        </li>
      </ul>
      <div class="right">
        <ul class="rightshang">
          <li>
            综合排序
            <span class="iconfont icon-xia" id="icon-xia"></span>
          </li>
          <li>
            预约排序
            <span class="iconfont icon-xia" id="icon-xia"></span>
          </li>
          <li>
            价格区间
            <span class="iconfont icon-xia" id="icon-xia"></span>
          </li>
        </ul>
        <div :class="flag?'rightzhong':'rightzhongs'">
          <img src="../../../../../assets/fonts2/2.png" alt />
        </div>
        <ul :class="flag?'rightxia':'rightxias'">
          <li v-for="(item) in this.$store.state.lists" :key="item.id">
            <div class="rightxialeft">
              <img :src="item.src" @click="xiang(item.id)"/>
            </div>
            <div class="rightxiaright">
              <h1>{{item.name}}</h1>
              <p class="pppp">{{item.introduce}}</p>
              <span>{{item.ristic}}</span>
              <h1 class="reads">￥{{item.price}}</h1>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Xiang v-if="flags" @tuichus="tuichua"/>
  </div>
</template>

<script>
import Xiang from "./xiang/xiang";

export default {
  name: "",
  components: {
    Xiang
  },
  data() {
    return {
      active: 0,
      flag: false,
      flaga: true,
      flags: false,
      juti:{
          yongliao:[
            {
              yong:"波士顿龙虾",
              qian:"1只(约750g)"
            },
            {
              yong:"大蒜",
              qian:"50g"
            },
            {
              yong:"生抽",
              qian:"5g"
            },
            {
              yong:"干粉丝",
              qian:"80g"
            },
            {
              yong:"豆油",
              qian:"30g"
            },
            {
              yong:"香葱",
              qian:"10g"
            },
            {
              yong:"黄油",
              qian:"10g"
            },
            {
              yong:"香油",
              qian:"3g"
            }
          ],
          zuofa:[
            {
              zhunbei:"准备好所有食材",
              src:"http://n.sinaimg.cn/sinacn21/290/w640h450/20180319/40ea-fyskeuc3864163.jpg"
            },
            {
              zhunbei:"龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾龙虾",
              src:"http://n.sinaimg.cn/sinacn21/290/w640h450/20180319/40ea-fyskeuc3864163.jpg"
            },
            {
              zhunbei:"热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅热锅",
              src:"http://n.sinaimg.cn/sinacn21/290/w640h450/20180319/40ea-fyskeuc3864163.jpg"
            },
            {
              zhunbei:"粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油粉丝香油",
              src:"http://n.sinaimg.cn/sinacn21/290/w640h450/20180319/40ea-fyskeuc3864163.jpg"
            },
            {
              zhunbei:"蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱蒸箱",
              src:"http://n.sinaimg.cn/sinacn21/290/w640h450/20180319/40ea-fyskeuc3864163.jpg"
            }
          ]
        }
    };
  },
  methods: {
    fanhui() {
      setTimeout(() => {
        history.back()
      }, 300);
      this.flaga = false;
    },
    gaoliang(id) {
      this.active = id;
      this.$store.commit("listsa", id);
    },
    xiang(id){
      this.flags=true
      let obj={
        id:id,
        juti:this.juti
      }
      this.$store.commit("cheng", obj);
    },
    tuichua(){
      this.flags=false
    }
  },
  created() {
    this.$store.commit("datasa", 1);
    this.$store.commit("listsa", 0);
    this.$store.commit("bancheng", 1);
  },
  mounted() {
    setTimeout(() => {
      this.flag = true;
    }, 20);
  }
};
</script>

<style scoped>
@import url("../../../../../assets/fonts2/iconfont.css");
.bancheng {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
.banchengs {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(100vw, 0);
  transition: all 300ms;
}
.shang {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shang > span {
  margin-left: 10px;
}
.ding {
  width: 100%;
  height: 30px;
}
.ding img {
  width: 100%;
  height: 30px;
}
.tou {
  width: 100px;
  height: 30px;
  background: rgba(145, 145, 145);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 10px;
}
.zhongjian {
  width: 1px;
  height: 60%;
  background: #fff;
}
.zhong {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.huayuan {
  width: 150px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.sousuos {
  width: 50px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.xia {
  width: 100%;
  height: calc(100% - 140px);
  display: flex;
  margin-top: 30px;
}
.left {
  width: 30%;
  height: 100%;
  transform: translate(0, 0);
  transition: all 500ms;
}
.lefts {
  width: 30%;
  height: 100%;
  transform: translate(0, 5vh);
  transition: all 500ms;
}
.left > .tui {
  background: #fff;
}
.left > .tui > p {
  display: inline-block;
  line-height: 12px;
  border-bottom: 10px solid rgba(255, 196, 91);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.left > li {
  width: 100%;
  height: 60px;
  background: rgba(248, 248, 248);
  text-align: center;
  line-height: 60px;
}
.right {
  width: 70%;
  height: 100%;
}
.rightshang {
  width: 100%;
  height: 30px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.rightshang li {
  margin-left: 20px;
}
#icon-xia {
  width: 5px;
  height: 3px;
  display: inline-block;
}
.rightzhong {
  width: 100%;
  height: 100px;
  transform: translate(0, 0);
  transition: all 1000ms;
}
.rightzhongs {
  width: 100%;
  height: 100px;
  transform: translate(0, 25vh);
  transition: all 1000ms;
}
.rightzhong img {
  width: 95%;
  height: 100%;
}
.rightxia {
  width: 95%;
  height: calc(100% - 130px);
  overflow-y: auto;
  margin-top: 10px;
  transform: translate(0, 0);
  transition: all 1000ms;
}
.rightxias {
  width: 95%;
  height: calc(100% - 130px);
  overflow-y: auto;
  margin-top: 10px;
  transform: translate(0, 20vh);
  transition: all 1000ms;
}
.rightxia li {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  display: flex;
}
.rightxialeft {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.rightxialeft img {
  width: 70%;
  height: 70%;
}
.rightxiaright {
  width: 60%;
  height: 100%;
}
.rightxiaright h1 {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.rightxiaright p {
  font-size: 12px;
  line-height: 20px;
  color: rgba(187, 187, 187);
}
.rightxiaright span {
  display: inline-block;
  width: 60px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  border: 1px solid blue;
  border-radius: 10px;
  color: blue;
}
.reads {
  color: red;
}
</style>